<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>

<body>
    <style type="text/css">
        html,
        body,
        ul,
        li,
        dl {
            margin: 0;
            padding: 0;
        }

        /* .j02 {
            width: 906px;
        } */

        .j02 .product {
            width: 282px;
            height: 333px;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        .j02 .product:nth-of-type(3n) {
            margin-right: 0;
        }

        .j02 .product-box {
            width: 1208px;
            margin-right: -20px;
        }

        .j02 .iwrap img {
            height: 210px;
        }

        /* ******** 商品展示:图片列表 start  *********** */
        /* 使用说明： 要在具体页面加下列css 
.j02 .product{width:282px;height:333px;margin-right:20px;margin-bottom:20px;}//图片是280x210
.j02 .product-box{width:1208px;margin-right:-20px;}//宽度是4个（容器+margin-right）的宽度之和
.j02 .iwrap img{height:210px;}    //限图片高度(此行可不写)    */
        .product {
            position: relative;
            float: left;
            background: #fff;
            line-height: 1.5;
            overflow: visible;
            z-index: 1;
        }

        .product:hover {
            overflow: visible;
            z-index: 3;
        }

        .product:hover .iwrap {
            margin: -3px;
            border: 4px solid #f83760;
            -webkit-transition: border-color .2s ease-in;
            -moz-transition: border-color .2s ease-in;
            -ms-transition: border-color .2s ease-in;
            -o-transition: border-color .2s ease-in;
            transition: border-color .2s ease-in;
        }

        .iwrap {
            display: block;
            position: absolute;
            background: #fff;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border: 1px solid #ececec;
            box-sizing: content-box;
        }

        .iwrap img {
            width: 100%;
            margin-bottom: 10px;
        }

        .iwrap p.line1 {
            margin-left: 10px;
            margin-right: 10px;
            color: #333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .iwrap p.line2 {
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 13px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .iwrap .line3 {
            position: absolute;
            bottom: 0;
            background: #f8f8f8;
            width: 100%;
            height: 56px;
        }

        .iwrap .line3 dd {
            display: block;
            float: left;
            line-height: 1;
        }

        .iwrap .line3 .c1 {
            width: 35%;
            font-size: 26px;
            overflow: hidden;
            white-space: nowrap;
        }

        .iwrap .rmb {
            display: block;
            float: left;
            font-size: 16px;
            padding-left: 0.5em;
        }

        .iwrap .money {
            display: block;
            float: left;
        }

        .iwrap .line3 .c2 {
            min-width: 22%;
            max-width: 28%;
            height: 56px;
            box-sizing: border-box;
            overflow: hidden;
            text-align: center;
        }

        .iwrap .triangle {
            display: block;
            float: left;
            width: 0;
            height: 0;
            box-sizing: border-box;
            border-width: 28px 14px 28px 14px;
            border-style: solid;
            border-color: #f8f8f8 #f73760 #f8f8f8 #f8f8f8;
        }

        .iwrap .line3 .c3 {
            width: 40%;
            height: 56px;
            background: #f73760;
            color: #fff;
            line-height: 56px;
            text-align: center;
            float: right;
            cursor: pointer;
        }

        /* ******** 商品展示:图片列表 end  *********** */
        /**弹框**/
        .dialogBox {
            position: absolute;
            margin: 0 auto;
            margin-top: 60px;
            text-align: center;
            border: 1px solid #d2d2d2;
            z-index: 999;
          
        }
        .dialogDiv{
            display: none;
        }
    </style>
    <div id="main">
        <div id="list">
            <div class="j02 main clearfix" v-for="(val,index) in result.data.list">
                <div class="product">
                    <div target="_blank" class="iwrap">
                        <!-- <img src="{{val.img_url}}"> 不能这么书写，会无法解析的 -->
                        <img :src="val.img_url">
                        <p class="f16 line1">{{val.name}}</p>
                        <p class="f12 line2 red"></p>
                        <dl class="line3">
                            <dd class="c2 red"><span class="rmb">￥{{val.price}}万</span></dd>
                            <dd class="c3 f16" @click="showDetail(index)"><i class="triangle"></i>详情</dd>
                        </dl>
                    </div>
                </div>           
            </div>
        </div>
        <div class="dialogDiv" id="dialogDiv">
            <div class="dialogBox">
                <div class="header">
                    <h3>商品详情</h3>
                </div>
                <div class="content">
                    <div>{{name}}</div>
                    <div>价格:{{price}}</div>
                    <div>{{brief}}</div>
                    <div>{{brief}}</div>
                    <div>{{brief}}</div>
                    <img :scr="img_url" >
                </div>
            </div>
        </div>

    </div>


</body>
<script>

    
    let list = [];
    for (let i = 0; i < 20; i++) {
        let obj = {};
        obj.name = '路虎discover' + (i + 1);
        obj.img_url = 'https://youjia-image.cdn.bcebos.com/modelImage/3e7fc7749996492ca2cc392bab734a21/1628501201288910972d.JPG';
        obj.brief = obj.name + ': 引进了国际散热器先进技术及科研生产装备，具备年产散热器50万';
        obj.date = '2022-4-3';
        obj.stock = 200;
        obj.price = i;
        list.push(obj);
    }
   //数据真实的场景是后端人员给的，一般都给json数据
    var obj = {
        code: 200,//状态码，为什么要给状态码，请求的话可能成功，可是失败，还可以不符合规范
        data: {
            page: 1,
            pageSize: 20,
            'list': list
        },
        msg:'请求成功',
    }
    let vue = new Vue({
        el: '#main',
        data: {
            result: obj,
            name: '',
            price: '',
            brief: '',
            img_url: '',
        },
        methods: {
            showDetail: function (i) {
                let obj = this.result.data.list[i];
                //obj 就是 list 中的一条数据
                for (let key in obj) {//key就是obj中的属性名
                    //key是变量
                    this[key] = obj[key];//为什么写个[]
                }
                document.getElementById("dialogDiv").style.display = "block";
                document.getElementById("list").style.opacity = "0.2";
                document.getElementById("dialogDiv").style.opacity = "1";
            }
        }
    });



</script>

</html>